<template>
    <main>
        <div class="top">
            <div class="top-box gWidth gCenter">
                <h2 class="module-title">新闻天地</h2>
            </div>
        </div>

        <div class="mid gWidth gCenter clearfix">
            <div class="left fl">
                <div class="themes">
                    <ul>
                        <themes-list></themes-list>
                    </ul>
                </div>
            </div>
            <div class="right fl">
                <div class="title-box">
                    <h2 class="theme-title">{{module.name}}</h2>
                </div>
                <div class="content">
                    <ul class="items">
                        <router-link  v-for="news in pageBean.items" :key="news.id" :to="'/index/news/'+news.id"><li class="clearfix"><span class="title">{{news.title}}</span><span class="date">{{new Date(news.postDate).Format("yyyy-MM-dd")}}</span></li></router-link>
                    </ul>
                </div>
                <div class="pagintaion">
                    <el-pagination
                        small
                        layout="prev, pager, next, total, sizes"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="pageBean.pageCount"
                        :page-sizes="[10, 20, 30, 50,80]"
                        :page-size="queryParams.pageSize"
                        :total="pageBean.total">
                    </el-pagination>
                </div>
            </div>
        </div>
    </main>
</template>

<script>
    import themesList from '@/components/module/themes-list'
    import newsApi from '../../../api/news'
    import newsModuleApi from '../../../api/newsModule'

    export default {
        name: "news-module",
        props:['moduleId'],
        data:()=>{
            return {
                module:{},
                pageBean:{
                    items:[],
                    pageCount:1,
                    pageSize:10,
                    totalPage:1,
                    total:0,
                },
                queryParams:{
                    pageCount:1,
                    pageSize:10,
                    moduleId:'-1',
                },
            }
        },
        mounted:function(){
            const _this = this;
            _this.queryParams.moduleId = _this.moduleId;
            newsModuleApi.findById(_this.moduleId)
                .then(data => {
                    _this.$set(_this,'module',data)
                })
            newsApi.findByPage(_this.queryParams)
                .then(data => {
                    _this.$set(_this,'pageBean',data)
                })
                
        },
        components:{
            'themes-list':themesList
        },
        methods:{
            refreshNewsList:function () {
                const _this = this;
                newsApi.findByPage(_this.queryParams).then(function (data) {
                        _this.pageBean = data
                        _this.pageBean.items.forEach(function (news) {
                            if (news.moduleId == null){
                                news.moduleId = '0';
                            }
                    })
                },function () {
                    _this.$message({type:'error',message:'加载文章失败'})
                })
            },
            handleCurrentChange:function (page) {
                this.queryParams.pageCount = page
                this.refreshNewsList()
            },
            handleSizeChange:function (size) {
                this.queryParams.pageSize = size
                this.queryParams.pageCount = 1
                this.refreshNewsList()
            },
        }
    }

</script>

<style scoped>
    main{
        margin-top: 0;
    }
    main>.top {
        height: 400px;
        background-color: #000000;
        background: url("../../../static/images/module-top.jpg");
        background-size: 100% 100%;
    }
    main>.mid{
        padding-top: 40px;
    }
    main>.mid>.left{
        width: 30%;
    }
    main>.mid>.right{
        width: 70%;
    }
    main>.top>.top-box{
        position: relative;
        height: 100%;
    }
    main>.top>.top-box>.module-title{
        width: 200px;
        height: 70px;
        line-height: 70px;
        text-align: center;
        position: absolute;
        bottom: 0px;
        left: 30px;
        color: white;
        font-weight: normal;
        background-color: #004a9899;
    }

    main>.mid>.left{
        padding: 0px 30px;
        box-sizing: border-box;
    }
    main>.mid>.left>.themes li{
        height: 50px;
        text-align: center;
        line-height: 50px;
        background-color: #fbfbfb;
        border-bottom: 1px solid #ebebeb;
        font-family: 微软雅黑;
    }
    main>.mid>.left>.themes li:hover{
        background-color: #ebebeb;
    }
    main>.mid>.right{
        background-color: #fbfbfb;
        box-sizing: border-box;
        padding: 0px 20px;
        padding-bottom: 20px;
    }
    main>.mid>.right>.title-box{
    }
    main>.mid>.right>.title-box>.theme-title{
        font-family: 微软雅黑;
        width: 150px;
        height: 50px;
        line-height: 50px;
        font-weight: lighter;
        color: #004a98;
        border-bottom: 2px solid #004a98;
        text-align: center;
    }
    main>.mid>.right>.content>.items{
        padding-top: 20px;
    }
    main>.mid>.right>.content>.items li{
        height: 40px;
        line-height: 40px;
        padding-left: 10px;
        font-family: 微软雅黑;

    }

    main>.mid>.right>.content>.items li:hover{
        color: #004a98;
    }

    main>.mid>.right>.content>.items li>.title{
        float: left;
    }
    main>.mid>.right>.content>.items li>.date{
        float: right;
    }
    main>.mid>.right>.pagintaion{
        padding-top: 20px;
        text-align: center;
    }
</style>
